/**
 * CSS/SCSS files with the .module.{css,scss} suffix will be treated as modules
 * and scoped locally.
 */

.mainHome {
  overflow: hidden;
  padding: 0;
  @media (max-width: 996px) {
    margin-top: 68px;
  }
}
.heroWrapper {
  background: var(--homepage-hero-gradient);
  padding: 0 8px;
  .hero {
    padding: 60px 0 40px;
    max-width: 1244px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 24px;
    > h1 {
      font-family: Barlow;
      font-weight: 700;
      font-size: 64px;
      margin: 0;
      line-height: 110%;
      letter-spacing: -2%;
      text-align: center;
      vertical-align: middle;
      .h1Content::before {
        content: "s";
        @media (min-width: 768px) {
          content: "umentation";
        }
      }
    }
    > p {
      max-width: 762px;
      margin: 0 auto;
      font-size: 18px;
      line-height: 140%;
      letter-spacing: 0%;
    }
    > .subline {
      font-size: 14px;
      font-family: "JetBrainsMono" !important;
      line-height: 120%;
    }
    .hero-code-wrapper {
      margin-top: -8px;
      pre[class*="language-"] {
        background: #121521 !important;
        code span {
          color: #E2E8F0 !important;
          &::before {
            color: #4A5568;
          }
        }
      }
      .hero-code {
        border-radius: 8px;
        max-width: max-content;
        outline: 0.832px solid #2D3748;
        margin: 0 auto;
        transition: all 300ms ease-in-out;
        box-shadow: 0px 0.83px 5.315px 0px rgba(42, 143, 108, 0.06), 0px 0.346px 2.211px 0px rgba(42, 143, 108, 0.04);
        button {
          opacity: 1;
          background-color: #2D3748;
          color: #E2E8F0;
          border: none;
          width: 24px;
          height: 24px;
          svg {
            width: 11px;
          }
        }
        pre {
          padding-right: 40px;
          ~ div {
            top: 50%;
            transform: translateY(-50%);
          } 
          code {
            font-size: 18px;
          }
        }
        &:hover {
          outline: 1px solid;
          box-shadow: 0px 0px 15.9px 0px rgba(113, 232, 223, 0.30);
          &.light {
            outline-color: var(--teal-600);
          }
          &.dark {
            outline-color: var(--teal-400);
          }
          button {
          opacity: 1 !important;
          }
        }
      }
    }
    .heroBadge {
      max-width: max-content;
      margin: 0 auto;
    }
    .tabBoxes {
      display: grid;
      text-align: left;
      gap: 40px;
      margin-top: 36px;
      grid-template-columns: 1fr;
      @media (min-width: 996px) {
        grid-template-columns: repeat(2, calc(50% - 20px));
      }
      .tabBox {
        width: 100%;
        height: 100%;
        max-width: 100%;
        @media (min-width: 996px) {
          height: 100%;
        }
        .heading {
          margin-bottom: 24px;
          font-size: 24px;
          color: var(--primary-font-color);
          font-weight: 700;
          font-family: Barlow;
          font-weight: 700;
          line-height: 110%; /* 26.4px */
          letter-spacing: -0.48px;
          padding: 8px 0;
          .leftIcon {
            color: var(--teal-600);
          }
        }
        .content {
          border: 1px solid var(--teal-600);
          border-radius: 8px;
          background-color: var(--notfound-background);
          display: grid;
          grid-template-rows: auto 1fr auto;
          padding: 16px 24px 32px;
          height: 100%;
          > p {
            margin: 0;
            font-size: 14px;
            padding-bottom: 24px;
          }
        }
        .heroTabs {
          width: 72px;
          height: 72px;
          padding: 12px;
        }
        .techGrid {
          display: flex;
          flex-wrap: wrap;
          gap: 12px;
        }
      }
      > div {
        display: grid;
        grid-template-rows: 1fr auto;
        > a {
          color: var(--teal-600);
          margin-top: 16px;
          font-family: Inter;
          font-weight: 600;
          font-size: 18px;
          display: block;
          > span {
            text-decoration: underline;
            text-decoration-style: solid;
            text-underline-offset: 3px;
          }
          > i {
            transition: transform 100ms ease-in-out;
          }
          &:hover {
            > i:last-child {
              transform: translateX(4px);
            } 
          }
        }
      } 
    }
  }
}

.icon {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #2d3748;
}

.h2 {
  //styleName: HEADINGS/H2;
  font-family: "Barlow", sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 52.8px;
  letter-spacing: -0.02em;
  text-align: left;
  @media (min-width: 996px) {
    font-size: 48px;
  }
}

.h3 {
  font-family: "Barlow", sans-serif;
  font-weight: bold;
  font-size: 28px;
  line-height: 110%;
  letter-spacing: -2%;
  margin: 40px 0 24px;
  
  @media (min-width: 996px) {
    margin: 80px 0 24px;
    font-size: 36px;
  }
}

.productCardsWrapper {
  max-width: 1240px;
  padding: 0 8px;
  width: 100%;
  margin: 0 auto;
  h3 {
    margin-bottom: 24px;
  }
}

.productCards {
  gap: 24px;
  flex-wrap: wrap;
  display: grid;
  @media (min-width: 996px) {
    grid-template-columns: repeat(3, 1fr);
  }
}


@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.howDoISection {
  padding: 0 8px;
  max-width: 1244px;
  scroll-margin-top: 96px;
  margin: 0 auto;
  .howGrid {
    display: grid;
    gap: 40px;
    grid-template-columns: 1fr;
    @media (min-width: 996px) {
      grid-template-columns: repeat(3, 1fr);
    }
    .howItem {
      border-bottom: 1px solid var(--border-color);
      padding: 24px 0;
      a {
        color: var(--secondary-font-color);
        h4 {
          font-family: "Barlow", sans-serif;
          font-weight: 700;
          font-size: 24px;
          line-height: 110%;
          letter-spacing: -2%;
          margin: 0 0 16px;

          display: inline;
          background-image: linear-gradient(currentColor, currentColor);
          background-repeat: no-repeat;
          background-position: 0 90%;
          background-size: 0% 2px;
          transition: background-size 0.4s ease;
        }
        &:hover h4 {
          background-size: 100% 2px;
        }
        p {
          max-width: 100%;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 4;
          -webkit-box-orient: vertical;
          font-weight: 400;
          font-size: 18px;
          line-height: 140%;
          letter-spacing: 0%;
          margin: 16px 0 0;
          @media (min-width: 996px) {
            height: 98px;
          }
        }
      }
      .footer {
        display: flex;
        justify-content: space-between;
        margin-top: 24px;
        .tags {
          display: flex;
          gap: 8px;
        }
        .readTime {
          display: flex;
          font-family: Barlow;
          font-weight: 600;
          font-size: 16px;
          align-items: center;
          line-height: 16.38px;
          letter-spacing: -0.28px;
          color: var(--gray-500);
        }
      }
      &.fadeIn {
        opacity: 0;
        animation: fadeIn 1s ease forwards;
        animation-timing-function: ease-in-out;
      }
    }
  }
  .seeMore {
    width: fit-content;
    margin: 24px 0 0 auto;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #16A394;
    letter-spacing: 0%;
    cursor: pointer;
    > span {
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    > i {
      transition: transform 150ms ease-in-out;
    }
    &:hover {
      > i {
        transform: translateY(4px);
      }
    }
    &.clicked {
      &:hover {
        > i {
          transform: translateY(-4px);
        }
      }
    }
  }
}

.getHelpSection {
  max-width: 1244px;
  padding: 0 8px;
  margin: 0 auto;
  .getHelpGrid {
    display: grid;
    gap: 40px;
    grid-template-columns: 1fr;
    @media (min-width: 996px) {
      grid-template-columns: repeat(3, 1fr);
    }
    .helpItem {
      margin: 8px 0 24px;
      display: grid;
      grid-template-rows: auto 1fr;
      .heading {
        display: flex;
        align-items: center;
        gap: 16px;
        .icon {
          width: 48px;
          height: 48px;
          background-color: var(--code-inline-bgd-color);
        }
        h4 {
          font-family: Barlow;
          font-weight: 700;
          margin: 0;
          font-size: 24px;
          line-height: 110.00000000000001%;
          letter-spacing: -2%;
        }
      }
      .content {
        display: grid;
        grid-template-rows: 1fr auto;
        > p {
          font-size: 18px;
          color: var(--tertiary-font-color);
          margin-bottom: 16px;
        }
        > .links {
          display: flex;
          font-size: 18px;
          flex-direction: column;
          gap: 16px;
          .link {
            color: var(--surface-secondary);
            font-weight: 600;
            > span {
              color: inherit;
              text-decoration: underline;
              text-underline-offset: 3px;
            }
            > i {
              transition: transform 100ms ease-in-out;
            }
            &:hover {
              > i:last-child {
                transform: translateX(4px);
              } 
            }
          }
        }
      }
    }
  }
}

.communityLinksSection {
  background: var(--community-bgd-color);
  margin: 80px 0 0;
  > div {
    display: grid;
    margin: 0 auto;
    max-width: 1272px;
    text-align: left;
    padding: 40px 16px;
    @media (min-width: 996px) {
      grid-template-columns: repeat(2, 1fr);
      padding: 80px 16px;
    }
    a {
      text-decoration: none;
    }
  }

  .sectionHero {
    h2.h2 {
      margin-top: 0;
      margin-bottom: 24px;
      font-size: 36px;
      line-height: 39.6px;
      color: var(--primary-font-color);
    }

    p {
      color: var(--secondary-font-color);
      margin-top: 0;
    }
  }
  .communityLinksRow {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 24px;
    @media (min-width: 996px) {
      justify-content: center;
    }
    .link {
      width: 72px;
      height: 72px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: var(--surface-primary);
      border-radius: 9px;
      border: 0.75px solid var(--border-color);
    }
  }
}
